﻿@namespace BlazorDemo.Pages.CaseViews

<div class="demo-description">
    <h2><DemoNavLink Link="ListBox#ItemValues" />Item Values</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2">List Box</a> component provides access to item values.
        The value is assigned to the editor's value when a user selects an item from the list.
        To enable this access, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2.ValueFieldName">ValueFieldName</a> property to the name of the data source field that ships with values for the List Box items.
    </p>
    <p>
        If the <b>ValueFieldName</b> property is not specified, the List Box component searches for a <b>Value</b> field in the data source and uses this field as a value field.
        Otherwise, values are not assigned to editor items.
    </p>
    <p>
        To access values of the selected items, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2.Values">Values</a> property.
        To track selection changes, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2.ValuesChanged">ValuesChanged</a> event or two-way synchronization as demonstrated in this module.
    </p>
</div>

<div class="row" style="margin-left: -10px; margin-right: -10px; max-width: 1120px">
    <div class="col-12 col-md-6" style="padding-left: 10px; padding-right: 10px;">
        <DxListBox Data="@Staff.DataSource" style="height: 232px;"
                   TextFieldName="@nameof(Person.Text)"
                   ValueFieldName="@nameof(Person.Id)"
                   SelectionMode="ListBoxSelectionMode.Multiple"
                   @bind-Values="@Values">
        </DxListBox>
    </div>
    <div class="col-12 col-md-6 mt-3 m-md-0" style="padding-left: 10px; padding-right: 10px;">
        <div class="card" style="height: 232px;">
            <div class="card-header bg-transparent text-body py-1 border-bottom-0 font-weight-bold">Selected values:</div>
            <div class="card-body p-0 overflow-auto">
                <ul class="list-group list-group-flush bg-transparent border-0">
                    @if (Values != null)
                    {
                        @foreach (var item in Values)
                        {
                            <li class="list-group-item bg-transparent text-body py-1 border-0">@item</li>
                        }
                    }
                </ul>
            </div>
        </div>
    </div>
</div>

<CodeSnippet_Editors_ListBox_ValueFieldProperty></CodeSnippet_Editors_ListBox_ValueFieldProperty>

@code {
    IEnumerable<int> Values { get; set; } = Staff.DataSource.Take(2).Select(t => t.Id);
}

